<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.groupName" placeholder="群组名" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit"
        @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
    </div>

    <div>
      <el-button v-waves class="filter-item" :type="personGruopType(chooseType)" round @click="choosePersonGruop">
        人员群组
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" :type="deviceGruopType(chooseType)" round
        @click="chooseDeviceGruop">
        设备群组
      </el-button>
    </div>

    <div class="block block-custom">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
        style="width: 100%;" height="calc(85vh - 200px)">
        <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ (listQuery.page - 1) * listQuery.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="群组名" align="center" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="群组介绍" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.introduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="群组成员" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.groupMember === null">
              无群组成员
            </div>
            <div v-else-if="scope.row.groupMember.length <= 5">
              <el-tag v-for="(item, index) of scope.row.groupMember" :key="index" style="margin-right:15px;" type=""
                effect="plain">
                {{ item.memberName || item.memberAccount || item.memberId }}
              </el-tag>
            </div>
            <div v-else>
              <el-tag v-for="(item, index) of scope.row.groupMember.slice(0, 5)" :key="index" style="margin-right:15px;"
                type="" effect="plain">
                {{ item.memberName || item.memberAccount }}
              </el-tag>

              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">{{ tooltipStr(scope.row.groupMember) }}</div>
                <el-tag effect="dark" type="warning"> 展开 + {{ scope.row.groupMember.length - 5}} </el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEditUpdate(scope.row)">
              {{ $t('table.edit') }}
            </el-button>
            <el-button v-if="scope.row.status != 'deleted'" type="danger" @click="handleDeletedDevice(scope.row)">
              {{ $t('table.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
      @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;" >
        <el-form-item label="群组名" prop="groupName">
          <el-input v-model="temp.groupName" placeholder="请输入群组名" />
        </el-form-item>
        <el-form-item label="群组类型" prop="groupType">
          <el-select v-if="dialogStatus == 'create'" v-model="temp.groupType" clearable placeholder="请选择群组类型"
            class="filter-item">
            <el-option v-for="(item, index) in groupTypeOptions" :key="index" :label="item.label" :value="item.value" />
          </el-select>
          <el-input v-if="dialogStatus == 'update'" :value="temp.groupType == '1' ? '人员群组' : '设备群组'"
            placeholder="请输入群组名" />
        </el-form-item>
        <el-form-item label="群组介绍" prop="introduction">
          <el-input type="textarea" :rows="2" placeholder="请输入群组介绍" v-model="temp.introduction" />
        </el-form-item>
        <el-form-item label="所属部门:">
          <el-cascader v-model="temp.org" :options="orgOptions" :props="orgProps" @change="orgChanged" style="width:100%;">
          </el-cascader>
        </el-form-item>
        <el-form-item label="群组成员" prop="groupMember">
          <div>
            <el-tag v-for="(item, index) of temp.groupMember" :key="index" style="margin-right:15px;" type=""
              effect="plain">
              {{ item.memberName || item.memberAccount || item.memberId }}
            </el-tag>
            <el-button type="success" @click="editGroupMember">编辑群组成员</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog class="view-dialog" title="人员搜索" :visible.sync="searchPersonDialogFormVisible" customClass="groupUserDialogWidth" :show-close="false">
      <el-row :gutter="10">
        <el-col :span="16">
          <div class="filter-container">
            <el-input v-model="groupUserListQuery.userName" placeholder="请输入用户名" style="width: 300px;">
              <template slot="prepend">
                用户名
              </template>
            </el-input>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="handleResetUserInfo" size="small"
              style="float: right; margin-right:20px;">
              重置
            </el-button>
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleSearchUserInfo" size="small"
              style="float: right; margin-right:20px;">
              搜索
            </el-button>
          </div>

          <el-table ref="userInfos" :key="tableKey" v-loading="userInfoListLoading" :data="userInfoList" fit
            highlight-current-row :header-cell-style="{ color: '#fff', backgroundColor: '#20B2AA' }"
            :row-key="handleReserveUser" @selection-change="handleUserSelectionChange()" height="calc(85vh - 200px)">
            <el-table-column type="selection" align="center" width="55" reserve-selection> </el-table-column>
            <el-table-column prop="userName" align="center" label="用户名" />
            <el-table-column prop="personName" align="center" label="人员名" />
            <el-table-column prop="gender" align="center" label="性别" />
            <el-table-column prop="department" align="center" label="所属单位" />
            <el-table-column prop="job" align="center" label="职务" />
            <el-table-column prop="phoneNum" align="center" label="电话" />
          </el-table>

          <pagination v-show="userListTotal > 0" :total="userListTotal" :page.sync="groupUserListQuery.page" :limit.sync="groupUserListQuery.size" @pagination="getUserInfoListForPagination" class="userPagination" />
        </el-col>
        <el-col :span="8">
          <div style="color: #1890ff;font-size: 16px;font-weight: bolder;padding-bottom:5px;">该群组已选{{ tagb.length }}个用户
          </div>
          <div style="height:550px;background-color:#85857ea7;padding:15px">
            <el-tag v-for="(tag, index) in tagb" :key="index" closable @close="handleUserCloseTag(tag)"
              :type="tag.userName" class="active">
              {{ tag.userName }}
            </el-tag>
          </div>

          <div style="padding:10px;float:right">
            <el-button type="primary" @click="confirmUserList">
              确定
            </el-button>
            <el-button @click="cancleUserList">
              取消
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog title="设备搜索" class="view-dialog" :visible.sync="searchDeviceDialogFormVisible" customClass="groupDeviceDialogWidth" :show-close="false">
      <el-row :gutter="10">
        <el-col :span="16">
          <div class="filter-container">
            <el-input v-model="groupDeviceListQuery.deviceId" placeholder="请输入设备ID" style="width: 300px;">
              <template slot="prepend">
                设备ID
              </template>
            </el-input>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="handleResetDeviceInfo" size="small"
              style="float: right; margin-right:20px;">
              重置
            </el-button>
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleSearchDeviceInfo" size="small"
              style="float: right; margin-right:20px;">
              搜索
            </el-button>
          </div>

          <el-table ref="deviceInfos" :key="tableKey" v-loading="deviceInfoListLoading" :data="deviceInfoList" fit
            highlight-current-row :header-cell-style="{ color: '#fff', backgroundColor: '#20B2AA' }"
            :row-key="handleReserveDevice" @selection-change="handleDeviceSelectionChange()" height="calc(85vh - 200px)">
            <el-table-column type="selection" align="center" width="55" reserve-selection> </el-table-column>
            <el-table-column prop="deviceId" align="center" label="设备ID" width="100"/>
            <el-table-column prop="deviceName" align="center" label="设备名称" width="100"/>
            <!-- <el-table-column prop="deviceNo" align="center" label="设备标识号" width="200" /> -->
            <el-table-column prop="manufactor" align="center" label="设备厂家" />
            <el-table-column prop="model" align="center" label="设备型号" />
            <el-table-column prop="factoryNo" align="center" label="设备出厂编号" />
          </el-table>

          <pagination v-show="deviceListTotal > 0" :total="deviceListTotal" :page.sync="groupDeviceListQuery.page" :limit.sync="groupDeviceListQuery.size" @pagination="getDeviceInfoListForPagination"
            class="userPagination" />
        </el-col>
        <el-col :span="8">
          <div style="color: #1890ff;font-size: 16px;font-weight: bolder;padding-bottom:5px;">该群组已选{{ tagb.length }}个设备
          </div>
          <div style="height:550px;background-color:#85857ea7;padding:15px">
            <el-tag v-for="(tag, index) in tagb" :key="index" closable @close="handleDeviceCloseTag(tag)" class="active">
              {{ tag.deviceId }}
            </el-tag>
          </div>

          <div style="padding:10px;float:right">
            <el-button type="primary" @click="confirmDeviceList">
              确定
            </el-button>
            <el-button @click="cancleDeviceList">
              取消
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getGroupPageInfos, createOrUpdate, deleteGroup } from '@/api/group'
import { getUserInfoList, getUserInfoListEncrypt } from '@/api/user'
import { getDeviceInfoList } from '@/api/device'
import { setOrgOptions } from '../memberOrgs'
import { updateMemberOrgs  } from '@/api/organization'
import { decryptAES } from '@/utils/aes'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import ElDragSelect from '@/components/DragSelect' // base on element-ui

const calendarTypeOptions = [{ key: 'CN', display_name: 'China' }, { key: 'US', display_name: 'USA' }, { key: 'JP', display_name: 'Japan' }, { key: 'EU', display_name: 'Eurozone' }]

const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ComplexTable',
  components: { Pagination, ElDragSelect },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      isOrgChanged: false,
      orgProps:
      {
        value: 'orgId',                 //匹配响应数据中的id
        label: 'orgName',               //匹配响应数据中的name
        children: 'children',        //匹配响应数据中的children
        checkStrictly: true
      },
      orgOptions: [],
      memberOrgForm: {
        memberId: 0,
        orgId: 0,
        memberType: 3
      },
      chooseType: 'personGroup',
      pubIndex: 0,
      active: '',
      tagb: [],
      tableKey: 0,
      userInfoTableKey: 0,
      deviceInfoTableKey: 0,
      list: null,
      userInfoList: [],
      deviceInfoList: [],
      userInfoListForAll: [],
      deviceInfoListForAll: [],
      groupSelectedUser: [],
      groupSelectedDevice: [],
      total: 0,
      userListTotal: 0,
      deviceListTotal: 0,
      listLoading: false,
      userInfoListLoading: false,
      deviceInfoListLoading: false,
      loadingOptions: false,
      listQuery: {
        page: 1,
        size: 10,
        groupName: '',
        groupType: 1
      },
      groupUserListQuery: {
        userId:0,
        userName: '',
        phoneNumber: '',
        personName: '',
        department: '',
        job: '',
        page: 1,
        size: 10
      },
      groupDeviceListQuery: {
        deviceNo: '',
        deviceType: '2',
        deviceId: '',
        manufactor: '',
        model: '',
        isActive: '',
        page: 1,
        size: 10
      },
      groupTypeOptions: [
        {
          value: 1,
          label: '人员群组'
        },
        {
          value: 2,
          label: '设备群组'
        }
      ],
      temp: {
        groupId: '',
        groupName: '',
        introduction: '',
        groupMember: [],
        groupType: '',
        org:[],
        isTemp:0
      },
      dialogFormVisible: false,
      searchPersonDialogFormVisible: false,
      searchDeviceDialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑修改群组信息',
        create: '新增群组'
      },
      dialogPvVisible: false,
      userInfoData: [],
      rules: {
        groupName: [{ required: true, message: '群组名不可空缺', trigger: 'blur' }],
        groupType: [{ required: true, message: '群组类型不可空缺', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
    setOrgOptions().then(res => {
      this.orgOptions.push(res)
    })
  },
  methods: {
    orgChanged() {
      this.isOrgChanged = true
    },
    //获取表格的行id
    getRowKeys(row) {
      return row.groupId
    },
    choosePersonGruop() {
      this.chooseType = 'personGroup'
      this.listQuery.groupType = 1
      this.getList()
    },
    chooseDeviceGruop() {
      this.chooseType = 'deviceGroup'
      this.listQuery.groupType = 2
      this.getList()
    },
    personGruopType(val) {
      if (val === 'personGroup') {
        return 'warning'
      } else {
        return 'info'
      }
    },
    deviceGruopType(val) {
      if (val === 'deviceGroup') {
        return 'warning'
      } else {
        return 'info'
      }
    },
    uniqueUserName(arr) {
      // 根据唯一标识orderId来对数组进行过滤
      const res = new Map()
      //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter(arr => !res.has(arr.userName) && res.set(arr.userName, 1))
    },
    uniqueDeviceNo(arr) {
      // 根据唯一标识orderId来对数组进行过滤
      const res = new Map()
      //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter(arr => !res.has(arr.deviceNo) && res.set(arr.deviceNo, 1))
    },
    handleUserSelectionChange(index) {
      //拿到的值赋值给变量refss
      let refs = this.$refs.userInfos.selection
      this.tagb = this.uniqueUserName(refs)
    },
    //删除已选Tag事件
    handleUserCloseTag(tag) {
      this.userInfoListForAll.forEach(row => {
        if (tag.userName === row.userName) {
          this.$refs.userInfos.toggleRowSelection(row, false)
        }
      })
    },
    handleDeviceSelectionChange(index) {
      //拿到的值赋值给变量refss
      let refs = this.$refs.deviceInfos.selection
      this.tagb = this.uniqueDeviceNo(refs)
    },
    //删除已选Tag事件
    handleDeviceCloseTag(tag) {
      this.deviceInfoListForAll.forEach(row => {
        if (tag.deviceNo === row.deviceNo) {
          this.$refs.deviceInfos.toggleRowSelection(row, false)
        }
      })
    },
    // 表格数据处理,保存上一页选中的数据
    // 返回的参数是每一行的值,需要指定表格数据的唯一值,一般是id
    handleReserveUser(row) {
      return row.userId
    },
    handleReserveDevice(row) {
      return row.deviceId
    },
    getList() {
      this.listLoading = true
      getGroupPageInfos(this.listQuery).then(response => {
        if (response.code === 0) {
          var start = this.listQuery.size * (this.listQuery.page - 1)
          var end = this.listQuery.page * this.listQuery.size
          this.list = response.data.items.slice(start, end)
          this.total = response.data.total
          this.listLoading = false
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    getUserInfoListForPagination() {
      this.userInfoListLoading = true
      if (this.groupUserListQuery.userName === '') {
        var start = this.groupUserListQuery.size * (this.groupUserListQuery.page - 1)
        var end = this.groupUserListQuery.page * this.groupUserListQuery.size
        this.userInfoList = this.userInfoListForAll.slice(start, end)
        this.userListTotal = this.userInfoListForAll.length
      } else {
        this.userInfoList = []
        var regex = new RegExp(this.groupUserListQuery.userName, 'i'); // 'i' 标志表示不区分大小写
        var result = this.userInfoListForAll.filter(item => regex.test(String(item.userName)));
        this.userInfoList = result
        this.userListTotal = this.userInfoList.length
      }

      this.userInfoListLoading = false
    },
    getUserInfoList() {
      this.userInfoListLoading = true
      getUserInfoList().then(response => {
        if (response.code === 0) {
          this.userInfoListForAll = response.data
          // this.userInfoListForAll = JSON.parse(decryptAES(response.data))
          //已有的群组名字，先在复选框打上勾
          this.temp.groupMember.forEach(element => {
            this.userInfoListForAll.forEach(row => {
              if (element.memberId === row.userId) {
                this.$refs.userInfos.toggleRowSelection(row, true)
              }
            })
          })

          var start = this.groupUserListQuery.size * (this.groupUserListQuery.page - 1)
          var end = this.groupUserListQuery.page * this.groupUserListQuery.size
          this.userInfoList = this.userInfoListForAll.slice(start, end)
          this.userListTotal = response.data.length
          this.userInfoListLoading = false
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    getDeviceInfoListForPagination() {
      this.userInfoListLoading = true
      if (this.groupDeviceListQuery.deviceId === '') {
        var start = this.groupDeviceListQuery.size * (this.groupDeviceListQuery.page - 1)
        var end = this.groupDeviceListQuery.page * this.groupDeviceListQuery.size
        this.deviceInfoList = this.deviceInfoListForAll.slice(start, end)
        this.deviceListTotal = this.deviceInfoListForAll.length
      } else {
        this.deviceInfoList = []
        var regex = new RegExp(this.groupDeviceListQuery.deviceId, 'i'); // 'i' 标志表示不区分大小写
        var result = this.deviceInfoListForAll.filter(item => regex.test(String(item.deviceId)));
        this.deviceInfoList = result
        this.deviceListTotal = this.deviceInfoList.length
      }

      this.deviceInfoListLoading = false
    },
    getDeviceInfoList() {
      this.deviceInfoListLoading = true
      getDeviceInfoListEncrypt().then(response => {
        if (response.code === 0) {
          response.data = JSON.parse(decryptAES(response.data))
          this.deviceInfoListForAll = response.data
          //已有的群组名字，先在复选框打上勾
          this.temp.groupMember.forEach(element => {
            this.deviceInfoListForAll.forEach(row => {
              if (element.memberId === row.deviceId) {
                this.$refs.deviceInfos.toggleRowSelection(row, true)
              }
            })
          })

          var start = this.groupDeviceListQuery.size * (this.groupDeviceListQuery.page - 1)
          var end = this.groupDeviceListQuery.page * this.groupDeviceListQuery.size
          this.deviceInfoList = this.deviceInfoListForAll.slice(start, end)
          this.deviceListTotal = response.data.length
          this.deviceInfoListLoading = false
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    calcPage(){
      let newPageing = Math.ceil((this.total - 1) / this.listQuery.size);//Math.ceil向上取整算出新的分页
      let currentPage = this.listQuery.page > newPageing ? newPageing : this.listQuery.page;//计算当前页应该是哪页
      this.listQuery.page = currentPage < 1 ? 1 : currentPage;//把当前页的值赋给this.page,重新渲染列表
    },
    handleDeletedDevice(row) {
      this.$confirm('此操作将永久删除该条目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(row.groupId).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.calcPage()
          this.getList()
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    resetTemp() {
      this.temp = {
        groupId: '',
        groupName: '',
        introduction: '',
        groupMember: [],
        groupType: '',
        isTemp: 0
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    SubmitFormData(formData) {
      createOrUpdate(formData).then(res => {
        if (res.data) {
          this.temp.groupId = res.data.groupId
          if(this.isOrgChanged)
          {
            this.memberOrgForm.memberId = this.temp.groupId
            this.memberOrgForm.memberType = 3
            this.memberOrgForm.orgId = this.temp.org.slice(-1)[0]
            updateMemberOrgs(this.memberOrgForm).then(res=>{
              if(res.code == 0)
              {
                this.$message.success('群组信息提交成功')
              }
              else
              {
                this.$message.error(res.msg)
              }
              this.getList()
              this.dialogFormVisible = false
              this.isOrgChanged = false
            })
          }
          else
          {
            this.$message.success('群组信息提交成功')
            this.getList()
            this.dialogFormVisible = false
          }
        }
      }
      )
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.SubmitFormData(this.temp)
        }
      })
    },
    handleEditUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.SubmitFormData(this.temp)
        }
      })
    },
    tooltipStr(groupMember) {
      var str = ''
      groupMember.forEach(element => {
        str = str + ' ' + ',' + element.memberName
      })
      str = str.slice(2)
      return str
    },
    editGroupMember() {
      //打开群组人员选择界面
      if (this.temp.groupType === 1) {
        this.searchPersonDialogFormVisible = true
        this.getUserInfoList()
      } else if (this.temp.groupType === 2) {
        this.searchDeviceDialogFormVisible = true
        this.getDeviceInfoList()
      } else {
        this.$message.error('请先选择群组类型')
      }
    },
    handleSearchUserInfo() {
      this.getUserInfoListForPagination()
    },
    handleResetUserInfo() {
      this.groupUserListQuery.userName = ''
      this.getUserInfoListForPagination()
    },
    handleSearchDeviceInfo() {
      this.getDeviceInfoListForPagination()
    },
    handleResetDeviceInfo() {
      this.groupDeviceListQuery.deviceId = ''
      this.getDeviceInfoListForPagination()
    },
    confirmUserList() {
      //拿到的值赋值给变量refss
      let refs = this.$refs.userInfos.selection
      this.temp.groupMember = []
      this.uniqueUserName(refs).forEach(element => {
        let groupMember = {
          memberId: 0,
          memberName: ''
        }
        groupMember.memberId = element.userId
        groupMember.memberName = element.userName

        this.temp.groupMember.push(groupMember)
      })
      this.$refs.userInfos.clearSelection()
      this.searchPersonDialogFormVisible = false
    },
    cancleUserList() {
      this.$refs.userInfos.clearSelection()
      this.searchPersonDialogFormVisible = false
    },
    confirmDeviceList() {
      //拿到的值赋值给变量refss
      let refs = this.$refs.deviceInfos.selection
      this.temp.groupMember = []
      this.uniqueDeviceNo(refs).forEach(element => {
        let groupMember = {
          memberId: 0,
          memberName: ''
        }
        groupMember.memberId = element.deviceId
        groupMember.memberName = element.deviceNo

        this.temp.groupMember.push(groupMember)
      })
      this.$refs.deviceInfos.clearSelection()
      this.searchDeviceDialogFormVisible = false
    },
    cancleDeviceList() {
      this.$refs.deviceInfos.clearSelection()
      this.searchDeviceDialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs .tab-label {
  color: red;
}

.block .el-range-separator {
  width: 24px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  /*滚动条宽度*/
  height: 8px;
  /*滚动条高度*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 0px;
  /*滚动条的背景区域的圆角*/
  background-color: rgba(2, 29, 87, 1);
  /*滚动条的背景颜色*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: rgba(2, 29, 87, 1);
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  /*滚动条的圆角*/
  background-color: rgba(24, 144, 255, 0.50);
  /*滚动条的背景颜色*/
}

/* .el-table__body-wrapper {
  height: calc(100% - 60px) !important;
} */

.use-name {
  font-size: 1rem;
  font-weight: 700;
  color: #606266;
}


/* 弹窗 */
/* 改变高度弹窗位置*/
/deep/ .dialog-content .el-dialog__body {
  height: 40vh;
  overflow: auto;
}

/deep/ .view-dialog>.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 2px 2px 5px #d0d0d0;
  max-height: calc(100%);
  max-width: calc(100%);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: hidden auto;
  /* 隐藏水平滚动条，显示垂直滚动条 */
  /* overflow-y: scroll; 显示垂直滚动条 */
}

/deep/ .view-dialog>.el-dialog>.el-dialog__header {
  width: 100%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  background: #F4F5F7;
  border-radius: 12px 12px 0px 0px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #252B3A;
  padding: 0 0 0 40px;
  padding-left: 0;
}

/deep/ .view-dialog>.el-dialog>.el-dialog__footer {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/deep/ .dialog-form>.el-form-item {
  margin-bottom: 30px;
}

/deep/ .dialog-form>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
  width: 220px;
  height: 34px;
  background: #FFFFFF;
  border: 1px solid #DCDEE2;
  border-radius: 3px;
}

/deep/ .dialog-form>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner {
  width: 220px;
  height: 34px;
  background: #FFFFFF;
  border: 1px solid #DCDEE2;
  border-radius: 3px;
}

/deep/ .view-dialog>.el-dialog>.el-dialog__header>.el-dialog__headerbtn {
  top: 0;
}

/deep/ .view-dialog .el-form-item__content {
  width: 100%;
}
</style>
